<template>
	<section id="app">
		<!-- header -->
		<header class="header">
			<router-link to='/home'>
				<div class="img_1"></div>
			<!-- <img src="/static/lunboimg/ml9vyh0ay7gwlypyrnyubsrr3svazpee.png" class="img_1"> --></router-link>
			<p>
				【驴妈妈】暑假作业做完啦！就要放肆去嗨！
			</p>
			<router-link to='/home'><img src="static/lunboimg/home.png"></router-link>		
		</header>
		<!-- city -->
		<div class="city">
			<img src="static/lunboimg/1502174825536.jpg">
			<div class="city_bottom" v-on:click="toggle()">
				<p>选择出发地：北京</p><span>其他城市</span>
			</div>
			<div class="choose_city" v-show="isShow">
				<p>天津</p>
				<p>上海</p>
				<p>杭州</p>
				<p>成都</p>
			</div>
		</div>
		<!-- baby -->
		<div class="baby">
			<div class="title">
				<div class="title_c">
					<h2>周边遛娃好去处</h2>
					—<span>给宝宝一个欢乐夏天</span>—
				</div>
			</div>
		</div>
		<!-- l-part_1 -->
		<div class="l-part_1">
			<div v-for='i in list'>
			<a href="javascript:void(0)" class="l-a">
				<img v-lazy="i.linkurl">
				<div class="l-ticket">门票</div>
				<div class="l-part_con">
					<div class="l-box">
					
						<h3>{{i.wname}}</h3>
						<div class="l-price">抢购价：<b>￥{{i.mprice}}</b><span>起/人</span><router-link to="/car" @click.native="add(obj)">立即抢购</router-link></div>
					</div>
				</div>
			</a>
			</div>
			<div class="l-more"><p>查看更多 &gt;&gt;</p></div>
		</div>
		<!-- footer -->
		<footer class="footer">
			
		</footer>
	</section>
</template>

<script type="text/javascript">
	export default {
		data(){
			return {
				isShow:false,
				list:[],
				obj:[]
			}
		},
		methods: {
			toggle:function(){
				this.isShow = !this.isShow;
			},
			request(i){
				this.$http.get("./static/lvmamahotel.json")
            	.then(function(res){
					this.list=res.body;

					for(var item in this.list){
						if(this.list[item].id==this.$route.params.para){
							this.obj=this.list[item];
						}
					}
            	})
			},
			add(obj){
				this.$store.commit("goods",obj)
			}
		},
		mounted(){
			this.request();		
		}	
	}
</script>

<style scoped>
/*header*/
.header{
	height: 1.1333rem;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	font-size:0.472222rem;
	background:#fff;
	position:fixed;
	top: 0;
	left: 0;
	z-index: 999;
}
.header .img_1{ 
	height:0.513889rem;
	width: 0.277778rem ;
	margin: 0 0 0 0.266667rem;
	background: url(../../../static/lunboimg/ml9vyh0ay7gwlypyrnyubsrr3svazpee.png) no-repeat center;
}
.header p{
	width: 69%;
	text-align: center;
	text-overflow:ellipsis; 
	overflow:hidden; 
	white-space:nowrap; 
}
/*city*/
.city{
	margin: 1.1333rem 0 0 0;
	height: 10.305556rem;
	width: 100%;
	font-size: 0.388889rem;
	position: relative;
}
.city img{
	height: 9.361111rem;
	width: 100%;
}
.city .city_bottom{
	height: 0.944444rem;
	width: 100%;
	background:#fd9ea6;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	margin: -0.11rem 0 0 0;
}
.city .city_bottom p{
	text-indent: 0.346667rem;
	margin: 0 0 0 0.293333rem;
	background:url(../../../static/lunboimg/address.png)no-repeat left center;
}
.city .city_bottom span{
	margin: 0 0.266667rem 0 0 ;
}
.city .choose_city{
	width: 100%;
	height: 0.944444rem;
	background: #fff;
	position: absolute;
	bottom: 0.944444rem;
	left: 0;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	line-height: 0.944444rem;
	color:#FE7300;
}
/*baby*/
.baby{
	width: 100%;
	display: flex;
	justify-content: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.baby .title{
	height: 2.208333rem;
	width:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.baby .title_c{
	color: #f86b7c;
	height: 1.416667rem;
	width: 70%;
	text-align: center;	
	background:url(../../../static/lunboimg/title3.png)center center no-repeat;
	background-size: 100%;
} 
.baby .title h2{
	font-size: 0.638889rem;
	color: #f86b7c;
	margin: 0 0 0.305556rem 0;
}
.baby .title span{
	font-size: 0.333333rem;
	color: #f86b7c;
	border: 2px solid #f5607e;
}
/*.l-part_1*/
.l-part_1 .l-a{
	display:inline-block;
	height: 4.8rem;
	width: 100%;
	position: relative;
	margin:0.266667rem 0 0 0;
	/*background: url(./static/lunboimg/ab2a150b-a692-45c1-a2f6-1ce8ec3e38dc_480_320.jpg)center center no-repeat;*/
}
.l-part_1 .l-a img{
	height: 5.0rem;
	width: 92%;
	margin: 0 4%;
}
.l-part_1 .l-a .l-ticket{
	height: 0.458333rem;
	width: 1.25rem;
	background:rgba(0,0,0,.6);
	border-radius: 0.208333rem;
	color: #fff;
	text-align: center;
	line-height: 0.458333rem;
	position: absolute;
	top: 0.25rem;
	left: 5%;
}
.l-part_1 .l-a .l-part_con{
	height: 1.388889rem;
	width: 92%;
	background:#fff;
	margin: 0 auto 0.277778rem auto;
}
.l-part_1 .l-a .l-part_con .l-box{
	height: 0.972222rem;
	width: 8.75rem;
	padding: 0.208333rem 0.305556rem;
}
.l-part_con .l-box h3{
	font-size: 0.383333rem;
	color: #000;
}
.l-part_con .l-box .l-price{
	color: #b31a0a;
	font-size: 0.375rem;
}
.l-part_con .l-box .l-price span{
	font-size: 0.305556rem;
}
.l-part_con .l-box .l-price b{
	font-weight: normal;
	font-size: 0.375rem;
}
.l-part_con .l-box .l-price a{
	float: right;
	color: #fff;
	height: 0.555556rem;
	width: 2.055556rem;
	background:#dc2400;
	text-align: center;
	line-height: 0.555556rem;
	border-radius: 0.138889rem;
}
.l-more{
	display: block;
	margin:0.333333rem 0 0 0;
	text-align: center;
	width:100%; 
	font-size: 0.305556rem;
	color: #fff;
}
.l-more p{
	height: 0.777778rem;
	width: 92%;
	background:#fcb1b6;
	margin: 0 auto;
	line-height: 0.777778rem;
	border-radius:0 0 0.236111rem 0.236111rem;
}
img[lazy=loading] {
    transform: scale(1.2,1.2);
  }
img[lazy=loaded] {
    transform: scale(1,1.0);
    transition: transform 1.5s;
  }

/*footer*/
.footer{
	height: 4.347222rem;
	width: 100%;
	background:url(../../../static/lunboimg/footer2.png)center center no-repeat;
}


</style>